<template>
  <div class="custom-button-wrapper">
    <el-button
      :size="size"
      :type="type"
      :plain="plain"
      :round="round"
      :circle="circle"
    >
      <i :class="icon" v-if="icon"></i>
      <span v-if="$slots.default">{{ $slots.default }}</span>
      <span v-else>{{ label }}</span>
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    label: {
      type: String,
      default: '按钮'
    },
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'medium'
    },
    icon: {
      type: String,
      default: ''
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less" scoped>
@button-primary-color: #1890ff;
@button-success-color: #52c41a;
@button-warning-color: #faad14;
@button-danger-color: #ff4d4f;

.custom-button-wrapper {
  margin: 10px;

  .el-button {
    transition: all 0.3s ease;

    &:hover:not(.is-disabled) {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &.is-primary {
      background-color: @button-primary-color;
      border-color: @button-primary-color;

      &:hover {
        background-color: lighten(@button-primary-color, 10%);
        border-color: lighten(@button-primary-color, 10%);
      }
    }

    &.is-success {
      background-color: @button-success-color;
      border-color: @button-success-color;

      &:hover {
        background-color: lighten(@button-success-color, 10%);
        border-color: lighten(@button-success-color, 10%);
      }
    }

    &.is-warning {
      background-color: @button-warning-color;
      border-color: @button-warning-color;

      &:hover {
        background-color: lighten(@button-warning-color, 10%);
        border-color: lighten(@button-warning-color, 10%);
      }
    }

    &.is-danger {
      background-color: @button-danger-color;
      border-color: @button-danger-color;

      &:hover {
        background-color: lighten(@button-danger-color, 10%);
        border-color: lighten(@button-danger-color, 10%);
      }
    }
  }
}
</style>
